// kvue-router.js
let Vue;
class VueRouter {
  constructor(options) {
    this.$options = options;
    // 创建一个路由path和route映射
    this.routeMap = {};
    // 将来当前路径current需要响应式
    // 利用Vue响应式原理可以做到这一点
    this.app = new Vue({
      data: {
        current: "/"
      }
    });
  }
  // 初始化路由对象
  init() {
    // 绑定浏览器事件
    this.bindEvents();
    this.createRouteMap(this.$options);
    this.initComponent();
  }
  bindEvents() {
    window.addEventListener("load", this.onHashChange.bind(this), false);
    window.addEventListener("hashchange", this.onHashChange.bind(this), false);
  }
  // 路由映射表
  createRouteMap(options) {
    options.routes.forEach(item => {
      this.routeMap[item.path] = item;
    });
  }
  // 初始化router-link和router-view组件
  initComponent() {
    Vue.component("router-link", {
      props: {
        to: String
      },
      render(h) {
        // return <a href={this.to}>{this.$slots.default}</a>;
        return h("a", {
            attrs: {
              href: "#" + this.to
            }
          }, [this.$slots.default]
        );
      }
    });
    Vue.component("router-view", {
      render: h => {
        var component = this.routeMap[this.app.current].component;
        return h(component);
      }
    });
  }
  // 设置当前路径
  onHashChange() {
    this.app.current = window.location.hash.slice(1) || "/";
  }
}
// 插件逻辑
VueRouter.install = function(_Vue) {
  Vue = _Vue; // 这里保存，上面使用
  Vue.mixin({
    // 混入任务：为了扩展Vue
    beforeCreate() {
      if (this.$options.router) {
        //根组件执行一次
        // 确保是根组件时执⾏⼀次，将router实例放到Vue原型，以后所有组件实例就均有$router
        // 这样我们就实现了Vue扩展
        // this是Vue组件实例
        Vue.prototype.$router = this.$options.router;
        this.$options.router.init(); // 初始化路由对象
      }
    }
  });
};
export default VueRouter;